import React from 'react';
import { Collapse } from '@/molecules';
import { useCollapse } from '@/hooks';
import { Form } from 'antd';
import { AssessAbilityDetail, AssessResultDynamic } from '../containers';
import { useAssessSetting } from '../hooks';
import { TRIAL_ACTION } from '../constants';

const { Panel } = Collapse;

function AssessTutorM({ data = {} }) {
    const { activeKey, onChange } = useCollapse(['1', '2'], []);
    const { m } = useAssessSetting(data);

    const detail = React.useMemo(() => {
        const { assessMonthly = [] } = data;
        return assessMonthly.find(item => item.status === TRIAL_ACTION.ASSESS_TEACHER_MONTH) || {};
    }, [data]);

    return (
        <div>
            <Collapse bordered={false} activeKey={activeKey} onChange={onChange}>
                <AssessResultDynamic data={data} />
                {m.showAssess && (
                    <Panel header="能力评估" key="2">
                        <AssessAbilityDetail data={detail} record={data} />
                    </Panel>
                )}
            </Collapse>
        </div>
    );
}

export default Form.create({})(AssessTutorM);
